<template>
    <div class="LargeScreen">
        <div class="topTitle">
            <img src="../assets/LargeScreen/topTitle.png" class="backTop">
            <img src="../assets/LargeScreen/LOGO.png" class="Logo">
            <img src="../assets/LargeScreen/realTimeBoard.png" class="realTime">
            <p class="weather">
                南京&nbsp;&nbsp;&nbsp;26℃&nbsp;&nbsp;{{currentTime}}
            </p>
        </div>
        <div class="content flex-evenly">
            <div>
                <span>设备名称：</span>
                <span style="color: #30C7FF">BDU自动化生产线</span>
            </div>
            <div>生产机种：{{productName}}</div>
            <div>
                <span>日期：</span>
                <span style="color: #FF8400">{{currentTime}}</span>
            </div>
        </div>
        <div class="realShowArea">
            <el-row>
                <el-col :span="24">
                    <div class="lineStep">
                        <img src="../assets/LargeScreen/smallScreenRecipe.png" alt="">
                        <div class="lineStepBox">
                            <div class="lineStepBoxLeft">
                                <div class="lineStepBoxLeftTop">
                                    有料
                                </div>
                                <div class="lineStepBoxLeftBottom">
                                    <DoubleLoop
                                            :tableData="DoubleLoopData"
                                            id="DoubleLoop1"
                                            style="width: 280px;height: 140px;transform: translateX(-56px);"
                                    ></DoubleLoop>
                                </div>
                            </div>
                            <div class="lineStepBoxRight">
                                <div class="recipeLineBoxItem" v-for="(item,index) in smallScreenDataArr">
                                    <span class="first">{{item.workStationName}}工站</span>
                                    <span class="second">正常</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="realShowArea">
            <el-row>
                <el-col :span="24">
                    <div class="lineStep">
                        <img src="../assets/LargeScreen/smallScreenRecipe.png" alt="">
                        <div class="lineStepBox">
                            <div class="lineStepBoxLeft">
                                <div class="lineStepBoxLeftTop">
                                    缺料
                                </div>
                                <div class="lineStepBoxLeftBottom">
                                    <DoubleLoop
                                            v-if="isDoubleLoop"
                                            :tableData="DoubleLoopData2"
                                            id="DoubleLoop2"
                                            style="width: 280px;height: 140px;transform: translateX(-56px);"
                                    ></DoubleLoop>
                                </div>
                            </div>
                            <div class="lineStepBoxRight">
                                <div class="recipeLineBoxItem" v-for="(item,index) in lostRecipeArr">
                                    <span class="first">#{{index+1}}工站</span>
                                    <span class="third">缺料</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>

  import {getSmallScreenDataApi} from "../api/workStation/handle";
  import {getRecipeCurrent} from "../api/workStation/login";

  export default {
    name: "SmallScreen",
    data() {
      return {
        currentTime: '',
        DoubleLoopData:[
          { value: 8, name: 'Direct' },
          { value: 18, name: 'Email' },
        ],
        smallScreenDataArr:[],
        lostRecipeArr:[],
        chartData: {
          id: 111111111,
          ele: 'ech_11111111',
          activeFlg: false,
          chartTitle: '指标名称',
          legend: [{name: '目标值', value: 90}, {name: '完成值', value: 56}],
          targetVal: 90,
          completeVal: 56,
        },
        productName:'',
        isDoubleLoop:true,
        reportTimer: null,
        helpTimer: null,
      }
    },
    methods:{
      getSmallScreenData(){
        getSmallScreenDataApi().then(res=>{
          if(res.status == 200 || res.status == 204){
            let arr = res.data;
            this.smallScreenDataArr =  arr.filter(item=>{
              return !item.isLost
            });
            this.lostRecipeArr = arr.filter(item=>{
              return item.isLost
            });
            this.DoubleLoopData[0].value = 8;
            this.DoubleLoopData[1].value = 18;
            this.isDoubleLoop = false;
            this.isDoubleLoop = true;
          }
        })
      },
      getWeatherAndTime(){
        let That = this;
        let timer = setInterval(()=>{
          That.currentTime = That.$moment().format('YYYY-MM-DD HH:mm:ss');
        },1000);
        this.$once('hook:beforeDestroy',()=>{
          clearInterval(timer);
          timer = null;
        })
      },
      getRecipeCurrentMethod(){
        getRecipeCurrent().then(res=>{
          if(res.status == 200){
            this.productName = res.data.productName
          }else{
            this.$message.error('获取产品名失败')
          }
        })
      },
      Timers(){
        this.helpTimer = setInterval(() => {
          this.getRecipeCurrentMethod();
        }, 30000);
        this.reportTimer = setInterval(() => {
          this.getSmallScreenData();
        }, 60000);
      }
    },
    created(){
      this.Timers();
      this.getWeatherAndTime();
      this.getSmallScreenData();
      this.getRecipeCurrentMethod();
    },
    mounted(){

    },
    computed:{
      DoubleLoopData2(){
        let newARR = [];
        newARR[0] = this.DoubleLoopData[1];
        newARR[1] = this.DoubleLoopData[0];
        return newARR;
      }
    },
    beforeDestroy() {
      window.clearInterval(this.reportTimer);
      this.reportTimer = null;
      window.clearInterval(this.helpTimer);
      this.helpTimer = null;
    },
  }
</script>

<style scoped lang="scss">
    .LargeScreen{
        width:1366px;
        height: 768px;
        background: #000000;
        .topTitle{
            width: 100%;
            height: 90px;
            position: relative;
            .Logo{
                position: absolute;
                top: 4px;
                left: 10px;
                height: 45px;
                transform: scale(0.6);
            }
            .backTop{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
            }
            .realTime{
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%) scale(.6);
            }
            .weather{
                position: absolute;
                top: 14px;
                right: 30px;
                font-size: 18px;
                font-family: Source Han Sans CN;
                font-weight: bold;
                color: #FFFFFF;
            }
            .von_sw{
                color: white;
                font-size: 36px;
                display: inline-block;
                width: 80px;
                text-align: center;
            }
        }
        .content{
            font-size: 20px;
            font-weight: bold;
            color: white;
            width: 100%;
            height: 60px;
            background: linear-gradient(180deg, #4E67B8, #012154);
        }
        .realShowArea{
            width: 100%;
            .lineStep{
                padding: 10px;
                .lineStepBox{
                    overflow: hidden;
                    transform: translateY(-4px);
                    width: 100%;
                    height: 174px;
                    background: rgba(0, 108, 255, 0.2);
                    border: 1px solid #8096BA;
                    display: flex;
                    .lineStepBoxLeft{
                        width: 166px;
                        height: 100%;
                        border-right: 1px solid rgba(44, 122, 195, .5);
                        .lineStepBoxLeftTop{
                            height: 43px;
                            line-height: 43px;
                            text-align: center;
                            background: rgba(41, 135, 207, .5);
                            font-size: 22px;
                            color:rgba(0, 255, 246, 1);
                        }
                        .lineStepBoxLeftBottom{
                            height: 130px;
                        }
                    }
                    .lineStepBoxRight{
                        padding: 10px 0 0 20px;
                        display: flex;
                        flex-wrap: wrap;
                        .recipeLineBoxItem{
                            width: 120px;
                            height: 30px;
                            line-height: 30px;
                            padding: 0 10px;
                            margin-bottom: 8px;
                            margin-right: 20px;
                            background: rgba(41, 135, 207, 0);
                            border: 1px solid rgba(24, 144, 255, 0.5);
                            font-size: 14px;
                            .first{
                                display: inline-block;
                                width: 70px;
                                color: white;
                            }
                            .second{
                                color: rgba(0, 255, 246, 1);
                            }
                            .third{
                                color: rgba(255, 71, 71, 1);
                            }
                        }
                    }
                }
            }
            .realShowAreaItem{
                padding-top: 10px;
                height: 550px;
                .table3{
                    transform: translateY(-4px);
                    width: 930px;
                    height: 506px;
                    background: rgba(0, 108, 255, 0.2);
                    border: 1px solid #8096BA;
                }
                .realShowAreaItemTop{
                    width: 100%;
                    height: 256px;
                }
                .realShowAreaItemBottom{
                    width: 100%;
                    height: 270px;
                    display: flex;
                    justify-content: space-evenly;
                    .tableBox{
                        .table{
                            transform: translateY(-4px);
                            width: 435px;
                            height: 250px;
                            background: rgba(0, 108, 255, 0.2);
                            border: 1px solid #8096BA;
                        }
                        .table1{
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            .trans{
                                padding-top: 20px;
                                padding-left: 18%;
                                font-size: 20px;
                                font-family: Source Han Sans CN;
                                font-weight: bold;
                                color: white;
                                z-index: -1;
                                transform: translate(-80px,-10px);
                                width: 364px;
                                height: 95px;
                                background: linear-gradient(90deg, rgba(149, 4, 2, .6),rgba(149, 4, 2, 0));
                            }
                        }
                        .table2{
                            .table2Top{
                                width: 100%;
                                height: 60px;
                                display: flex;
                                align-items: center;
                                justify-content: space-evenly;
                                font-size: 26px;
                                font-family: Source Han Sans CN;
                                font-weight: 400;
                                color: #00FFF6;
                                background: rgba(41, 135, 207, .5);
                            }
                            .table2Bottom{
                                display: flex;
                                align-items: center;
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
